﻿
        var csss =
        {
            categories: [
			{ name: "Font", rules: [
										{ title: "font-family", inputobject: inputbox("font-family", ["Verdana", "Times", "Tahoma"]) },
										{ title: "font-size", inputobject: inputbox("font-size", ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger"]) },
										{ title: "font-size-adjust", inputobject: inputbox("font-size-adjust", "") },
										{ title: "font-stretch", inputobject: inputbox("font-stretch", ["normal", "wider", "narrower", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"]) },
										{ title: "font-style", inputobject: inputbox("font-style", ["normal", "italic", "oblique"]) },
										{ title: "font-variant", inputobject: inputbox("font-variant", ["norma", "small-caps"]) },
										{ title: "font-weight", inputobject: inputbox("font-weight", ["normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"]) },
										{ title: "color", inputobject: inputbox("color", '') },
										{ title: "direction", inputobject: inputbox("direction", ["ltr", "rtl"]) },
										{ title: "line-height", inputobject: inputbox("line-height", '') },
										{ title: "letter-spacing", inputobject: inputbox("letter-spacing", '') },
										{ title: "text-align", inputobject: inputbox("text-align", ["left", "right", "center", "justify"]) },
										{ title: "text-decoration", inputobject: inputbox("text-decoration", ["none", "underline", "overline", "line-through", "blink"]) },
										{ title: "text-indent", inputobject: inputbox("text-indent", '') },
										{ title: "text-shadow", inputobject: inputbox("text-shadow", '') },
										{ title: "text-transform", inputobject: inputbox("text-transform", ["none", "capitalize", "uppercase", "lowercase"]) },
										{ title: "unicode-bidi", inputobject: inputbox("unicode-bidi", ["normal", "embed", "bidi-override"]) },
										{ title: "white-space", inputobject: inputbox("white-space", ["normal", "pre", "nowrap"]) },
										{ title: "word-spacing", inputobject: inputbox("word-spacing", '') }
										]
            },
			{ name: "Block", rules: [
										{ title: "height", inputobject: inputbox("height", '') },
										{ title: "line-height", inputobject: inputbox("line-height", '') },
										{ title: "max-height", inputobject: inputbox("max-height", '') },
										{ title: "max-width", inputobject: inputbox("max-width", '') },
										{ title: "min-height", inputobject: inputbox("min-height", '') },
										{ title: "min-width", inputobject: inputbox("min-width", '') },
										{ title: "width", inputobject: inputbox("width", '') }
										]
			},
			          
            { name: "Background", rules: [
								        { title: "background-attachment", inputobject: inputbox("background-attachment", ["scroll", "fixed"]) },
								        { title: "background-color", inputobject: inputbox("background-color", '') },
								        { title: "background-image", inputobject: inputbox("background-image", '') },
								        { title: "background-position", inputobject: inputbox("background-position", ["top left", "top center", "top right", "center left", "center center", "center right", "bottom left", "bottom center", "bottom right"]) },
								        { title: "background-repeat", inputobject: inputbox("background-repeat", ["repeat", "repeat-x", "repeat-y", "no-repeat"]) }
							           ]
            },
			{ name: "Border", rules: [
										{ title: "border-bottom", inputobject: inputbox("border-bottom", '') },
										{ title: "border-bottom-color", inputobject: inputbox("border-bottom-color", '') },
										{ title: "border-bottom-style", inputobject: inputbox("border-bottom-style", '') },
										{ title: "border-bottom-width", inputobject: inputbox("border-bottom-width", '') },
										{ title: "border-color", inputobject: inputbox("border-color", '') },
										{ title: "border-left", inputobject: inputbox("border-left", '') },
										{ title: "border-left-color", inputobject: inputbox("border-left-color", '') },
										{ title: "border-left-style", inputobject: inputbox("border-left-style", '') },
										{ title: "border-left-width", inputobject: inputbox("border-left-width", '') },
										{ title: "border-right", inputobject: inputbox("border-right", '') },
										{ title: "border-right-color", inputobject: inputbox("border-right-color", '') },
										{ title: "border-right-style", inputobject: inputbox("border-right-style", '') },
										{ title: "border-right-width", inputobject: inputbox("border-right-width", '') },
										{ title: "border-style", inputobject: inputbox("border-style", ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"]) },
										{ title: "border-top", inputobject: inputbox("border-top", '') },
										{ title: "border-top-color", inputobject: inputbox("border-top-color", '') },
										{ title: "border-top-style", inputobject: inputbox("border-top-style", '') },
										{ title: "border-top-width", inputobject: inputbox("border-top-width", '') },
										{ title: "border-width", inputobject: inputbox("border-width", '') }
										]
			},
			{ name: "Box", rules: [
										{ title: "padding-bottom", inputobject: inputbox("padding-bottom", '') },
										{ title: "padding-left", inputobject: inputbox("padding-left", '') },
										{ title: "padding-right", inputobject: inputbox("padding-right", '') },
										{ title: "padding-top", inputobject: inputbox("padding-top", '') },
										{ title: "margin-bottom", inputobject: inputbox("margin-bottom", '') },
										{ title: "margin-left", inputobject: inputbox("margin-left", '') },
										{ title: "margin-right", inputobject: inputbox("margin-right", '') },
										{ title: "margin-top", inputobject: inputbox("margin-top", '') }
										]
			},

			{ name: "Position", rules: [
										{ title: "bottom", inputobject: inputbox("bottom", '') },
										{ title: "clip", inputobject: inputbox("clip", '') },
										{ title: "left", inputobject: inputbox("left", '') },
										{ title: "overflow", inputobject: inputbox("overflow", ["visible", "hidden", "scroll", "auto"]) },
										{ title: "position", inputobject: inputbox("position", ["static", "relative", "absolute", "fixed"]) },
										{ title: "right", inputobject: inputbox("right", '') },
										{ title: "top", inputobject: inputbox("top", '') },
										{ title: "vertical-align", inputobject: inputbox("vertical-align", ["baseline", "sub", "super", "top", "text-top", "middle", "bottom", "text-bottom"]) },
										{ title: "z-index", inputobject: inputbox("z-index", '') }
										]
			},
            
			{ name: "Layout", rules: [
										{ title: "clear", inputobject: inputbox("clear", ["left", "right", "both", "none"]) },
										{ title: "cursor", inputobject: inputbox("cursor", ["auto", "crosshair", "default", "pointer", "move", "e-resize", "ne-resize", "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", "text", "wait", "help"]) },
										{ title: "display", inputobject: inputbox("display", ["none", "inline", "block", "list-item", "run-in", "compact", "marker", "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group", "table-column", "table-cell", "table-caption"]) },
										{ title: "float", inputobject: inputbox("float", ["left", "right", "none"]) },
										{ title: "position", inputobject: inputbox("position", ["static", "absolute", "relative", "fixed"]) },
										{ title: "visibility", inputobject: inputbox("visibility", ["visible", "hidden", "collapse"]) }
										]
			},
			
			
			{ name: "List", rules: [
										{ title: "list-style-image", inputobject: inputbox("list-style-image", '') },
										{ title: "list-style-position", inputobject: inputbox("list-style-position", ["inside", "outside"]) },
										{ title: "list-style-type", inputobject: inputbox("list-style-type", ["none", "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-alpha", "upper-alpha", "lower-greek", "lower-latin", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha"]) },
										{ title: "marker-offset", inputobject: inputbox("marker-offset", '') }
										]
			},
            
			{ name: "Table", rules: [
										{ title: "border-collapse", inputobject: inputbox("border-collapse", '') },
										{ title: "border-spacing", inputobject: inputbox("border-spacing", '') },
										{ title: "caption-side", inputobject: inputbox("caption-side", ["top", "bottom", "left", "right"]) },
										{ title: "empty-cells", inputobject: inputbox("empty-cells", ["show", "hide"]) },
										{ title: "table-layout", inputobject: inputbox("table-layout", ["auto", "fixed"]) }
										]
			}
			/*{ name: "Outlines", rules: [
										{ title: "outline-color", inputobject: inputbox('','') },
										{ title: "outline-style", inputobject: inputbox('','') },
										{ title: "outline-width", inputobject: inputbox('','') }
										]
			},*/
			
        ]
        };
        function inputbox(title, value) {
            var tmp;
            if ($.isArray(value)) {
                tmp = $('<select></select>').attr('id', title).change(selectchanges);
                $('<option></option>').appendTo(tmp);
                for (var i = 0; i < value.length; i++) {
                    var tmpitem = $('<option></option>').attr('value', value[i]).html(value[i]);
                    tmpitem.appendTo(tmp);
                }
                
            }
            else
                tmp = $('<input/>').attr('type', 'text').attr('id', title).attr('size', 10).attr('value', value).change(inputchanges);

            return tmp.addClass('incsseditor');
        }

        function selectchanges() {
            var objid = $(this).attr('id');
            var objvalue = $("#" + $(this).attr('id') + " option:selected").text();
            appendToDescription(objid, objvalue);
        }
        function inputchanges() {
            var objid = $(this).attr('id');
            var objvalue = $(this).val();
            appendToDescription(objid, objvalue);
        }

        function appendToDescription(objid, objvalue) {
            var oldText = $(".descriptiondiv").text();
            if (oldText != '')
                oldText += ';';
            $(".descriptiondiv").text(oldText + objid + ':' + objvalue);
            $(".previewContent").css(objid, objvalue);
        }

        (function($) {
            $.fn.cssDialog = function() {
                return this.each(function() {
                    /// new code
                    var objDialog = $(this).attr('title', 'Modify Style').addClass('cssdialog');
                    objDialog.dialog({ width: 660, height: 530,
                        buttons:
                                    	        { "Cancel": function() { $(this).dialog("close"); },
                                    	            "OK": function() { applyStyle(); }
                                    	        },
                        closeOnEscape: true,
                        modal: true
                    });

                    var objcssTab = $('<div></div>').addClass('csstab2');
                    var objcssTabTitle = $('<ul></ul>');
                    var arrTabContent = new Array();
                    for (var i = 0; i < csss.categories.length; i++) {
                        var tmpObj = $('<div></div>').attr('id', csss.categories[i].name).addClass('inputfield');
                        for (var k = 0; k < csss.categories[i].rules.length; k++) {
                            var tmpDiv = $('<div></div>').addClass('inputrow');
                            var tmpTitle = $('<div></div>').html(csss.categories[i].rules[k].title).addClass('inputtitle');
                            tmpTitle.appendTo(tmpDiv);
                            csss.categories[i].rules[k].inputobject.appendTo(tmpDiv);
                            tmpDiv.appendTo(tmpObj);
                        }
                        var objLi = $('<li></li>');
                        var objA = $('<a></a>').attr('href', '#' + csss.categories[i].name);

                        $('<span></span>').html(csss.categories[i].name).appendTo(objA);
                        objA.appendTo(objLi);
                        objLi.appendTo(objcssTabTitle);
                        arrTabContent[arrTabContent.length] = tmpObj;
                    }
                    objcssTabTitle.appendTo(objcssTab);
                    for (var j = 0; j < arrTabContent.length; j++)
                        arrTabContent[j].appendTo(objcssTab);

                    objcssTab.appendTo(objDialog);
                    var privewContent = $('<div></div>').addClass('previewContent').html('AaBbYyGgLlJj');
                    var previewDiv = $('<div></div>').addClass('previewdiv');
                    privewContent.appendTo(previewDiv);
                    var previewDivTitle = $('<div></div>').addClass('previewtitle').html('Preview');
                    previewDivTitle.appendTo(objDialog);
                    previewDiv.appendTo(objDialog);
                    $('<div></div>').addClass('descriptiontitle').html('Description').appendTo(objDialog);
                    $('<div></div>').addClass('descriptiondiv').html('').appendTo(objDialog);
                    objcssTab.tabs();
                    objDialog.dialog('close');
                    return objDialog;
                    /// new code    
                });
            };
        })(jQuery);


        function applyStyle() {
            if (cssed.find('.descriptiondiv').text())
                addRulesToCss(_currentTag, cssed.find('.descriptiondiv').text());
            cssed.dialog('close');
        }      
